<template>
  <div class="bos">
      <div class="header">
   <!-- 面包屑 -->
      <XtxBread>
        <XtxBreadItem to="/">首页</XtxBreadItem>
        <XtxBreadItem :to="$store.state.rout.url.a">{{$store.state.rout.url.name}}</XtxBreadItem>
      </XtxBread>
      </div>
     <div class="main">
         <!-- 品牌 -->
<div class="pinpai">
    <div class="divs">品牌：</div>
    <div>
         <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
    </div>

</div>
<!-- 尺码 -->
<div class="chima">
     <div class="divs">尺码：</div>
    <div>
         <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
    </div>
</div>
<!-- 颜色 -->
<div class="colors">
     <div class="divs">颜色：</div>
    <div>
         <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
     <a href="#">全部</a>
    </div>
</div>
     </div>
  </div>
</template>

<script>
import { useRoute } from 'vue-router'

export default {
  name: 'Data',
  setup () {
    const route = useRoute()
    console.log(route, 'whkh')
    return {
      route
    }
  }
}
</script>

<style lang="less">
.bos{
    margin: 0 auto;
    a{
        margin-left: 25px;

        transition: all .5s;
          &:hover{
                color: chartreuse;
            }
    }

}
.header{
  width: 1024px;
 margin: 0 auto;
}
.main{
    padding: 20px;
    background-color: #ffffff;
  width: 1024px;
 margin: 0 auto;
}
.pinpai,.chima,.colors{
    display: flex;

    margin-bottom: 20px;
.divs{
height: 20px;
    width: 100px;
}
}
.chima{

}
 .pinpaigoods{

margin-bottom: 20px;
    }
.colors{

}
</style>
